<template>
    <view class="page">
        <div class="header">
            <div class="flex">
                <div>总资产(元)</div>
            </div>
            <div class="flex money">
                <div class="count">999.9</div>
                <div class="flex btns"></div>
            </div>
            <div class="tixian-list">
                <div class="tx-item">
                    <div class="tx-title">可提现金额(元)</div>
                    <div class="tx-money">9.9</div>
                    <image
                        class="right-icon"
                        src="https://cos.aitshirt.cn/app-icon/%E8%B7%AF%E5%BE%84%20224%402x.png"
                        alt=""
                    ></image>
                </div>
                <div class="tx-item">
                    <div class="tx-title">累计提现(元)</div>
                    <div class="tx-money">9.9</div>
                    <image
                        class="right-icon"
                        src="https://cos.aitshirt.cn/app-icon/%E8%B7%AF%E5%BE%84%20224%402x.png"
                        alt=""
                    ></image>
                </div>
            </div>
        </div>

        <view class="withdraw-container">
            <!-- 提现金额区域 -->
            <view class="withdraw-amount">
                <view class="section-title">提现金额</view>
                <view class="amount-input-container">
                    <view class="currency-symbol">¥</view>
                    <input
                        type="digit"
                        class="amount-input"
                        placeholder="请输入提现金额"
                        v-model="amount"
                        @input="calculateFee"
                    />
                </view>
                <div class="fee-all">
                    <view class="fee-info">手续费: ¥ {{ fee }}</view>
                    <view class="withdraw-all" @click="withdrawAll"
                        >全部提现</view
                    >
                </div>
            </view>

            <!-- 提现须知区域 -->
            <view class="withdraw-notice">
                <view class="section-title">提现须知:</view>
                <view class="notice-list">
                    <view
                        class="notice-item"
                        v-for="(item, index) in noticeList"
                        :key="index"
                    >
                        {{ index + 1 }}.{{ item }}
                    </view>
                </view>
            </view>

            <view class="pay-button" @click="handlePay"> 立即支付</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 提现金额
const amount = ref('');
// 手续费
const fee = ref('0.5');
// 用户余额
const balance = ref('1000.00');
// 提现须知列表
const noticeList = ref([
    'xxxxxxxxxxxxxxxxxxxx。',
    'xxxxxxxxxxxxxxxxxxxx。',
    'xxxxxxxxxxxxxxxxxxxx。',
    'xxxxxxxxxxxxxxxxxxxx。',
]);

// 计算手续费
const calculateFee = () => {
    // 这里可以根据实际需求计算手续费，示例中固定为0.5元
    fee.value = '0.5';
};

// 全部提现
const withdrawAll = () => {
    amount.value = balance.value;
    calculateFee();
};

// 处理提现
const handleWithdraw = () => {
    if (!amount.value || parseFloat(amount.value) <= 0) {
        uni.showToast({
            title: '请输入提现金额',
            icon: 'none',
        });
        return;
    }

    uni.showModal({
        title: '提现确认',
        content: `您将提现¥${amount.value}，手续费¥${fee.value}，实际到账¥${(parseFloat(amount.value) - parseFloat(fee.value)).toFixed(2)}`,
        success: (res) => {
            if (res.confirm) {
                uni.showToast({
                    title: '提现申请已提交',
                    icon: 'success',
                });
                // 这里可以添加实际的提现逻辑
            }
        },
    });
};
</script>

<style scoped lang="scss">
.page {
    background: #f3f7f8;
    padding: 16rpx;
    min-height: calc(100% - 32rpx);
}

.header {
    display: flex;
    flex-direction: column;
    //height: 250rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    padding: 32rpx 16rpx;

    .flex {
        font-weight: 400;
        font-size: 28rpx;
        color: #222222;

        &.money {
            margin: 16rpx 0;
        }
    }

    .count {
        font-weight: bold;
        font-size: 64rpx;
        color: #f25a27;
        line-height: 90rpx;
    }

    .btns {
        gap: 16rpx;
    }

    .tixian-list {
        position: relative;
        display: flex;
        align-items: center;
        height: 66rpx;
        gap: 64rpx;

        &:after {
            position: absolute;
            left: 50%;
            content: '';
            width: 0rpx;
            height: 32rpx;
            border: 1rpx solid #e4e4e4;
            transform: translateX(-50%);
        }

        .tx-item {
            width: 50%;
            display: flex;
            align-items: center;
            font-weight: 400;
            font-size: 24rpx;
            color: #222222;
            line-height: 32rpx;

            .tx-title {
            }

            .tx-money {
                font-weight: bold;
                margin: 0 16rpx;
            }

            .right-icon {
                width: 12rpx;
                height: 20rpx;
                margin-left: auto;
            }
        }
    }
}

.withdraw-container {
    padding: 16rrpx;
    background-color: #f5f5f5;
    margin: 16rpx 0 0;
    .withdraw-amount {
        background-color: #fff;
        border-radius: 16rpx;
        padding: 30rpx;
        margin-bottom: 30rpx;
        position: relative;
        .amount-input-container {
            display: flex;
            align-items: center;
            border-bottom: 2rpx solid #eee;
            padding-bottom: 20rpx;
            margin-bottom: 20rpx;
            .currency-symbol {
                font-weight: bold;
                font-size: 38rpx;
                color: #222222;
                line-height: 38rpx;
            }
            .amount-input {
                flex: 1;
                height: 38rpx;
                font-weight: 400;
                font-size: 28rpx;
                color: #6f6f6f;
                line-height: 38rpx;
                padding: 0 20rpx;
            }
        }
        .fee-all {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .fee-info {
            font-size: 24rpx;
            color: #222222;
        }

        .withdraw-all {
            float: right;
            font-weight: 400;
            font-size: 24rpx;
            color: #f25a27;
            line-height: 32rpx;
        }
    }
}

.section-title {
    font-size: 28rpx;
    font-weight: bold;
    margin-bottom: 24rpx;
}

.withdraw-notice {
    border-radius: 16rpx;
    padding: 16rpx;
    margin-bottom: 100rpx;
    background: #ffffff;
    box-shadow: 0rpx 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
    .notice-list {
        margin-top: 20rpx;
        .notice-item {
            font-weight: 400;
            font-size: 24rpx;
            color: #222222;
            line-height: 34rpx;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

.pay-button {
    position: fixed;
    bottom: 40rpx;
    width: calc(100% - 64rpx);
    height: 72rpx;
    background: linear-gradient(90deg, #f32f1a 0%, #f68a2d 100%);
    font-weight: 400;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 72rpx;
    text-align: center;
}
</style>
